<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import {currentUser} from "@/App.vue";
import {showToast} from "vant";
import request from "@/assets/js/mobileRequest";
import qs from "qs";

const back = () => {
  router.back();
}

const userInfo = ref({
  userId:'',
  username:'test',
  password:'',
  description:'吾心吾行澄如明镜，所作所为皆是正义。吾心吾行澄如明镜，所作所为皆是正义。',
  level: 10,
  gender: '男',
  phone:'',
  nickname:'',
  email:'',
  birth:'',
  avatarImgUrl:''
})

const saveInfo = ref({})

const genderOptions = ref([
  {text: '男',value: '男'},
  {text: '女',value: '女'},
])

const dateInfo = ref({
  currentDate:[],
  minDate: new Date(1997,1,1),
  maxDate: new Date()
})

const avatar = ref([])
const actionSheetShow = ref(false)
const genderPopup = ref(false)
const textInfoPopup = ref({
  show: false,
  title: ''
})
const sheetSelect = (item) => {
  console.log(item)
}

const uploadAvatar = (file) => {
  console.log(file)
  let avatar = {file:file.file}
  request({
    method: "post",
    url: BASE_URL + '/v1/file/upload',
    data: avatar,
    headers: {'Content-Type': 'multipart/form-data'}
  }).then(res => {
    if (res.data.code === 2000) {
      console.log(res.data.data)
      saveInfo.value.avatarImgUrl = res.data.data;
      console.log(saveInfo.value)
      saveExchange()
    }
  })
}

const birthConfirm = () => {
  userInfo.value.birth = dateInfo.value.currentDate.join('-');
  actionSheetShow.value = false;
}

const genderConfirm = (item) => {
  saveInfo.value.gender = item.selectedValues[0];
  saveExchange();
  genderPopup.value = false;
}

const showTextPopup = () => {

}

const saveExchange = () => {
  if (JSON.stringify(saveInfo.value) === "{}") return
  saveInfo.value.userId = userInfo.value.userId;
  let data = qs.stringify(saveInfo.value)
  console.log(saveInfo.value)
  request({
    method: "post",
    url: BASE_URL + '/v1/user/update',
    data: data
  }).then(res => {
    if (res.data.code === 2000) {
      showToast('修改成功')
      console.log(res.data.data)
    }
  })
  saveInfo.value = {};
}

onMounted(() => {
  nextTick(() => {
    userInfo.value = currentUser.value
    console.log(userInfo.value)
    dateInfo.value.currentDate = userInfo.value.birth.split('-')
    avatar.value.push({url:BASE_URL + '/original' + userInfo.value.avatarImgUrl})
  })
})
</script>

<template>
  <div style="display: flex;justify-content: center;align-items: center">
    <van-nav-bar
        left-arrow
        left-text="返回"
        title="设置"
        style="width: 100%;"
        @click-left="back"
    />
  </div>
  <div style="height: 93vh;overflow-y: scroll">
    <van-cell-group title="基本信息">
      <van-cell title="头像">
        <template #value>
          <van-uploader v-model="avatar" :max-count="1" reupload :after-read="uploadAvatar"/>
        </template>
      </van-cell>
      <van-cell title="用户昵称" is-link @click="showTextPopup">
        <van-field v-model="saveInfo.nickname" :placeholder="userInfo.nickname" style="padding: 0" input-align="right" @blur="saveExchange"/>
      </van-cell>
      <van-cell title="性别" v-model:value="userInfo.gender" is-link arrow-direction="down" @click="genderPopup = true"/>
      <van-popup v-model:show="genderPopup" position="bottom">
        <van-picker :columns="genderOptions" @confirm="genderConfirm" @cancel="genderPopup = false"/>
      </van-popup>
      <van-cell title="生日" arrow-direction="down" is-link v-model:value="userInfo.birth" @click="actionSheetShow = true"/>
      <van-popup v-model:show="actionSheetShow" position="bottom">
        <van-date-picker
            v-model="dateInfo.currentDate"
            title="选择日期"
            :min-date="dateInfo.minDate"
            :max-date="dateInfo.maxDate"
            @confirm="birthConfirm"
            @cancel="actionSheetShow = false"
        />
      </van-popup>
      <van-cell title="个性签名" v-model:value="userInfo.description" >
        <van-field type="textarea" rows="2" autosize v-model="saveInfo.description" :placeholder="userInfo.description" style="padding: 0" input-align="right" @blur="saveExchange"/>
      </van-cell>
    </van-cell-group>
    <van-cell-group title="账号安全">
      <van-cell title="账号" v-model:value="userInfo.username" >
        <van-field v-model="saveInfo.username" :placeholder="userInfo.username" style="padding: 0" input-align="right" @blur="saveExchange"/>
      </van-cell>
      <van-cell title="密码" v-model:value="userInfo.password" >
        <van-field v-model="saveInfo.password" :placeholder="userInfo.password" style="padding: 0" input-align="right" @blur="saveExchange"/>
      </van-cell>
      <van-cell title="邮箱" v-model:value="userInfo.email" >
        <van-field v-model="saveInfo.email" :placeholder="userInfo.email" style="padding: 0" input-align="right" @blur="saveExchange"/>
      </van-cell>
      <van-cell title="手机号" v-model:value="userInfo.phone" >
        <van-field v-model="saveInfo.phone" :placeholder="userInfo.phone" style="padding: 0" input-align="right" @blur="saveExchange"/>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<style scoped>

</style>